<template>
    <div>
        <!-- 表单 -->
        <el-form :inline="true">
            <el-form-item label="姓名">
                <el-input v-model="name" placeholder="项目编码/项目名称" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="pageQuery">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toAdd()">+ 添加检查项</el-button>
            </el-form-item>
        </el-form>


        <!-- 表格 -->
        <el-table size="small" border current-row-key="id" :data="tableData" stripe highlight-current-row>
            <el-table-column prop="code" label="项目编码" align="center"></el-table-column>
            <el-table-column prop="name" label="项目名称" align="center"></el-table-column>
            <el-table-column prop="price" label="项目价格" align="center"></el-table-column>
            <el-table-column label="适用性别" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sex == '0' ? '不限' : scope.row.sex == '1' ? '男' : '女' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="age" label="适用年龄" align="center"></el-table-column>
            <el-table-column prop="remark" label="项目说明" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="edit(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteById(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <br>
        <!-- 分页条 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
            layout="sizes,prev, pager, next,jumper,total" :total="total"></el-pagination>

        <!-- 对话框 -->
        <el-dialog :title="isAdd ? '添加检查项' : '编辑检查项'" :visible.sync="addFormVisible" width="500px">
            <el-form ref="checkItem" :model="checkItem" label-width="80px" size="mini">
                <el-form-item label="编号">
                    <el-input v-model="checkItem.code"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="checkItem.name"></el-input>
                </el-form-item>
                <el-form-item label="适用性别">
                    <el-select v-model="checkItem.sex" placeholder="请选择性别">
                        <el-option label="不限" value="0"></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="checkItem.price"></el-input>
                </el-form-item>
                <el-form-item label="适用年龄">
                    <el-select v-model="checkItem.age" placeholder="请选择年龄">
                        <el-option label="0-18岁" value="0-18"></el-option>
                        <el-option label="18-100岁" value="18-100"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="检查类型">
                    <el-select v-model="checkItem.type" placeholder="请选择类型">
                        <el-option label="一般检查" value="1"></el-option>
                        <el-option label="化验检验" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="注意事项">
                    <el-input type="textarea" v-model="checkItem.attention"></el-input>
                </el-form-item>
                <el-form-item label="项目说明">
                    <el-input v-model="checkItem.remark"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" v-if="isAdd" @click="add">确 定</el-button>
                    <el-button type="primary" v-if="!isAdd" @click="updateById">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>


<script>
//导入axios
import axios from "axios";

export default {
    data() {
        return {
            isAdd: "",
            tableData: [],
            page: 1,
            size: 10,
            total: 100,
            name: "",
            checkItem: {},
            addFormVisible: false
        };
    },

    methods: {
        //分页
        pageQuery: function () {
            axios.get("http://localhost:8080/checkItem/pageQuery", {
                params: {
                    page: this.page,
                    size: this.size,
                    name: this.name
                }
            }).then((result) => {
                if (result.data.code == 1) {
                    this.tableData = result.data.data.rows;
                    this.total = result.data.data.total;
                } else {
                    this.$message.error("查询失败");
                }
            }).catch((e) => {
                this.$message.error("操作失败");
            });
        },

        toAdd: function () {
            this.addFormVisible = true;
            this.isAdd = true;
            this.checkItem = {};
        },

        //添加
        add: function () {
            axios.post("http://localhost:8080/checkItem", this.checkItem).then((result) => {
                if (result.data.code == 1) {
                    this.$message.success("添加成功");
                    this.addFormVisible = false;
                    this.pageQuery();
                }
            });
        },

        //删除
        deleteById: function (id) {
            this.$confirm('确定删除？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //确认
                axios.delete("http://localhost:8080/checkItem/" + id).then((result) => {
                    if (result.data.code == 1) {
                        this.$message.success("删除成功");
                        this.pageQuery();
                    }
                });
            }).catch(() => {
                //取消
                this.$message.info("已取消操作");
            });
        },


        //打开编辑对话框
        edit: function (id) {
            axios.get("http://localhost:8080/checkItem/" + id).then((result) => {
                if (result.data.code == 1) {
                    this.isAdd = false;
                    this.addFormVisible = true;
                    this.checkItem = result.data.data;
                }
            });
        },

        //更新
        updateById: function () {
            axios.put("http://localhost:8080/checkItem", this.checkItem).then((result) => {
                if (result.data.code == 1) {
                    this.$message.success("更新成功");
                    this.addFormVisible = false;
                    this.pageQuery();
                }
            });
        },

        onSubmit: function () {
            this.pageQuery();
        },

        handleSizeChange(val) {
            this.size = val;
            this.pageQuery();
        },
        handleCurrentChange(val) {
            this.page = val;
            this.pageQuery();
        },
    },

    mounted() {
        this.pageQuery();
    }
};
</script>

